<template>
	<view class="zone">
		<Header title="往期记录"></Header>

		<view class="main">
			<image class="yun" src="http://image.qxgm.site/tdz/img/public/m_yun.png" mode="widthFix"></image>
			<image class="ping1" src="http://image.qxgm.site/tdz/img/public/ping1.png" mode="widthFix"></image>
			<view class="infobox">
				<!-- 近100期记录 -->
				<view class="main_top">
					<view class="head_text">
						<image src="http://image.qxgm.site/tdz/img/public/l1.png" mode="widthFix"></image>
						<text>近100期记录</text>
						<image src="http://image.qxgm.site/tdz/img/public/r1.png" mode="widthFix"></image>
					</view>
					<view class="pic_text">
						<view class="demo" v-for="(item,index) in 6" :key="index">
							<image :src="`http://image.qxgm.site/tdz/img/mozun/j${index+1}.png`" mode="widthFix">
							</image>
							<text class="sz">{{list[index+1]}}次</text>
						</view>
					</view>
				</view>


				<!-- 近8期记录 -->
				<view class="main_center">
					<view class="head_text">
						<image src="http://image.qxgm.site/tdz/img/public/l1.png" mode="widthFix"></image>
						<text>近8期记录</text>
						<image src="http://image.qxgm.site/tdz/img/public/r1.png" mode="widthFix"></image>
					</view>
					<view class="pic_text2">
						<view class="demo" v-for="(item,index) in list_ten" :key="index">
							<text class="sz">第{{item.phase}}期</text>
							<image :src="`http://image.qxgm.site/tdz/img/mozun/w${item.building_id}.png`" mode="widthFix" />
							<!-- <text class="people">{{item.building_str}}</text> -->
						</view>
						<view class="empty2" v-if="list_ten==''">
							<image src="http://img.qxgm.site/sjcs/static/public/empty.png" mode="widthFix" />
							<text>数据为空</text>
						</view>
					</view>
				</view>

				<view class="botbox">
					<view class="head_text">
						<image src="http://image.qxgm.site/tdz/img/public/l1.png" mode="widthFix"></image>
						<text>我的记录</text>
						<image src="http://image.qxgm.site/tdz/img/public/r1.png" mode="widthFix"></image>
					</view>
					<scroll-view class="list" scroll-y="true" @scrolltolower="scnextrecord">
						<view class="l_item" v-for="(item,index) in datalist" :key="index">
							<view class="left">
								<text>我进入 {{item.building_id == 1 ? '泰山' : item.building_id == 2 ? '崇山' : item.building_id == 3 ? '峨眉' : item.building_id == 4 ? '昆仑' : item.building_id == 5 ? '长白' : '华山'}}投入{{item.invest_num}}灵石</text>
								<view class="so">魔尊袭击<text class="color">
                                {{item.visiting_id == 1 ? '泰山' : item.visiting_id == 2 ? '崇山' : item.visiting_id == 3 ? '峨眉' : item.visiting_id == 4 ? '昆仑' : item.visiting_id == 5 ? '长白' : '华山'}}
                                </text></view>
							</view>
							<view class="right">
								<text class="fail">{{item.phase}}期</text>
                                <text class="success" v-if="item.status == 1">进行中</text>
                                <text class="success" v-else>
                                    <text v-if="item.invest_status == 3">被袭击</text>
                                    <text v-if="item.invest_status == 4">+{{item.profit}}</text>
                                    <text v-if="item.invest_status == 5">流局</text>
                                </text>
                            </view>
						</view>
						<view class="empty2" v-if="datalist==''">
							<image src="http://img.qxgm.site/sjcs/static/public/empty.png" mode="widthFix" />
							<text>数据为空</text>
						</view>
						<u-loadmore v-else :status="status" :icon-type="iconType" :load-text="loadText" />
					</scroll-view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: '',
				list_ten: '',
				invest_sum: '', //投入
				earn_num: '', //获得
				page: 1,
				max_page: '',
				datalist: [], //我的参与记录
				name: ['泰山', '崇山', '峨眉', '昆仑', '长白', '华山'],
				status: 'loadmore',
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '没有更多了'
				},
			};
		},
		filters: {
			//过滤器 用于格式化时间
			dateFormat: function(value) {
				var date = new Date(value * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				var year = date.getFullYear();
				var month = ("0" + (date.getMonth() + 1)).slice(-2);
				var sdate = ("0" + date.getDate()).slice(-2);
				var hour = ("0" + date.getHours()).slice(-2);
				var minute = ("0" + date.getMinutes()).slice(-2);
				var second = ("0" + date.getSeconds()).slice(-2);
				// 拼接
				var result = year + "-" + month + "-" + sdate + ' ' + hour + ':' + minute + ':' + second
				// 返回
				return result;
			},
		},
		onLoad() {
			this.getWerewolfLog();
			this.getJoinLog();
		},
		
		methods: {

			async getWerewolfLog() {
				let res = await this.$http.index.werewolflog()
				// console.log(res);
				this.list = res.data.hundred
				this.list_ten = res.data.ten
				this.invest_sum = res.data.invest_sum
				this.earn_num = res.data.earn_num
			},
			// 获取我的参与记录
			async getJoinLog() {
				let res = await this.$http.index.joinlog({
					page: this.page,
				})
				this.datalist = [...this.datalist, ...res.data.data]
				this.max_page = res.data.last_page
				if (this.page > this.max_page || this.page == this.max_page) this.status = 'nomore';
			},
            scnextrecord() {
            	if (this.page >= this.max_page) {
            		this.status = 'nomore'
            		return;
            	}
            	this.status = 'loading';
            	this.page = ++this.page;
            	this.getJoinLog()
            	setTimeout(() => {
            		if (this.page > this.max_page || this.page == this.max_page) this.status = 'nomore';
            		else this.status = 'loading';
            	}, 500)
            },
		},
	}
</script>

<style lang="less">
	.zone {
		min-height: 100vh;
		background: url(http://image.qxgm.site/tdz/img/public/p_bg.png) no-repeat;
		background-size: 100% auto;
	}


	.main {
		margin-top: 10px;
		position: relative;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.yun {
			position: absolute;
			top: -3%;
			left: 0;
			width: 44%;
			z-index: 9;
		}

		.ping1 {
			width: 100%;
			display: flex;
		}

		.infobox {
			width: 100%;
			padding: 20px 7px 10px;
			background: url(http://image.qxgm.site/tdz/img/public/ping2.png);
			background-size: 100% auto;
			box-sizing: border-box;
			height: calc(100vh - 92px);
			overflow-y: scroll;
		}

		.main_center {
			box-sizing: border-box;
			background: #dad6d4;
			border-radius: 5px;
			padding: 20px 14px 10px;
			margin-top: 6px;
		}

		.main_buttom {
			width: 100%;
			background: rgba(255, 255, 255, 0.1);
			box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
			border-radius: 5px;
			padding: 15px;
			margin-top: 10px;
		}

		.main_top {
			box-sizing: border-box;
			background: #dad6d4;
			border-radius: 5px;
			padding: 20px 14px 10px;
		}

		.head_text {
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 18%;
			}

			text {
				font-size: 20px;
				font-weight: normal;
				color: #50463E;
				line-height: 20px;
				margin: 0 13px;
			}
		}

		.pic_text {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: space-between;
			margin-top: 10px;
			box-sizing: border-box;

			.demo {
				width: 27%;
				position: relative;
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-bottom: 10px;

				image {
					width: 100%;
				}

				.demo_buttom {
					width: 100%;
					height: 18px;
					font-size: 13px;
					font-weight: bold;
					color: #fff;
					line-height: 18px;
					position: absolute;
					text-align: center;
					top: 60%;
					left: 0;
				}

				.sz {
					position: absolute;
					bottom: 0;
					right: 10px;
					font-size: 14px;
					color: #FFFFFF;
					font-weight: normal;
					text-shadow: 0 1px 1px #000;
				}
			}
		}
	}

	.pic_text2 {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		margin-top: 10px;
		box-sizing: border-box;

		.demo {
			width: 21%;
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-bottom: 10px;
            margin-right: 4%;
			image {
				width: 100%;
			}

			.demo_buttom {
				width: 100%;
				height: 18px;
				font-size: 13px;
				font-weight: bold;
				color: #fff;
				line-height: 18px;
				position: absolute;
				text-align: center;
				top: 60%;
				left: 0;
			}

			.sz {
				position: absolute;
				bottom: 0;
				right: 10px;
				font-size: 14px;
				color: #FFFFFF;
				font-weight: normal;
				text-shadow: 0 1px 1px #000;
				z-index: 1;
			}
		}
	}

	.box {
		width: 100%;
		background: rgba(255, 255, 255, 0.1);
		box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
		border-radius: 5px;
		padding: 10px;
		margin-top: 10px;

		h3 {
			color: #fff;
			font-size: 14px;
			margin-bottom: 12px;
		}
	}

	.flexbox {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.f_item {
			width: 48%;
			padding: 10px;
			background: #EEE7D2;
			border-radius: 5px;
			display: flex;
			align-items: center;

			image {
				width: 50px;
				margin-right: 10px;
			}

			.word {
				display: flex;
				flex-direction: column;

				text:nth-child(1) {
					color: #70390A;
					font-size: 13px;
				}

				text:nth-child(2) {
					color: #D03900;
					font-size: 14px;
					margin-top: 4px;
				}
			}
		}
	}

	.empty2 {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 100%;

		image {
			width: 40%;
		}

		text {
			color: #fff;
		}
	}

	.botbox {
		margin-top: 10px;
		background: #dad6d4;
		border-radius: 5px;
		padding: 20px 14px 10px;
	}

	.list {
		width: 100%;
		border-radius: 10px;
		overflow: hidden;
        height: calc(100vh - 600px);
	}

	.topbvox {
		display: flex;
		align-items: center;
		justify-content: space-between;

		text {
			flex: 1;
			text-align: center;
			color: #fff;
		}
	}

	.l_item {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 13px 3px 9px 12px;
		background: url(http://image.qxgm.site/tdz/img/xianyu/mg-06.png) no-repeat;
		background-size: 100% 100%;
		margin: 10px 0;

		.left {
			display: flex;
			flex-direction: column;

			text:nth-child(1) {
				font-size: 14px;
				color: #333333;
				font-weight: normal;
				line-height: 14px;
				margin-bottom: 9px;
			}

			.color {
				color: #FF3399 !important;
			}

			.so {
				font-size: 14px;
				font-weight: normal;
				color: #333333;
				line-height: 14px;
			}

		}



		.right {
			width: 40%;
			display: flex;
			flex-direction: column;
			align-items: flex-end;

			text:nth-child(1) {
				font-size: 12px;
				font-weight: normal;
				color: #333333;
				line-height: 12px;
				margin-right: 10px;
			}

			text:nth-child(2) {
				width: 100%;
				font-size: 14px;
				color: #FF3333;
				font-weight: normal;
				line-height: 14px;
				padding: 4px 0;
				text-align: center;
				margin-top: 6px;
				background: rgba(122, 133, 119, 0.26);
				border-radius: 10px;
			}
		}


	}
</style>